<template>
    <div class="yuansuoxinxi"  v-if="hasPerm('GardenHouse:Info')">
        <div class="top-catd">
            <a-button class="fr" v-if="hasPerm('GardenHouse:Save')" type="primary" @click="save" :loading="confirmLoading">
            保存
            </a-button>
            <a-button class="fr margin-right-10" type="primary" @click="resetFrom" :loading="confirmLoading">
            重置
            </a-button>
        </div>
        <a-row :gutter="20">
            <a-col :span="12">
                <a-card class="card-bg">
                    <a-form :form="form" layout="horizontal">
                        
                        <a-form-item
                            style="display: none;"
                            :labelCol="labelCol"
                            :wrapperCol="wrapperCol"
                            has-feedback
                            >
                            <a-input v-decorator="['id']" />
                        </a-form-item>
                        <a-form-item
                        label="园所名称"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        <a-input placeholder="请输入园所名称" v-decorator="['gardenName', {rules: [{required: true, message: '请输入园所名称！'}]}]" />
                        </a-form-item>

                        <a-form-item
                        label="成立时间"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        <a-date-picker class="fullwidth" @change="changedate" :format="dateFormat" :valueFormat="dateFormat" v-decorator="['dateofEstablishment', {rules: [{required: true, message: '请选择成立时间！'}]}]" />
                        </a-form-item>
                        
                        
                        <a-form-item
                        label="所在城市"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        <!-- <a-cascader v-decorator="['cRoomCode', {rules: [{required: true, message: '请选择所在城市！'}]}]" :options="cityOptions" placeholder="Please select" @change="onCityChange" /> -->
                        <a-select class="margin-right-10" v-model="provinceName"  style="width: 120px" @change="handleProvinceChange" placeholder="请选择省">
                            <a-select-option v-for="item in provinceData" :key="item.name" :value="item.name">
                                {{ item.name }}
                            </a-select-option>
                        </a-select>
                        <a-select class="margin-right-10" v-model="cityName" style="width: 120px" @change="handleCityChange" placeholder="请选择城市">
                            <a-select-option v-for="city in cities" :key="city.name" :value="city.name">
                                {{ city.name }}
                            </a-select-option>
                        </a-select>
                        <a-select v-model="areaName" style="width: 120px" placeholder="请选择地区">
                            <a-select-option v-for="city in places" :key="city.name" :value="city.name">
                                {{ city.name }}
                            </a-select-option>
                        </a-select>
                        </a-form-item>

                        
                        <a-form-item
                        label="街道"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        <a-input placeholder="请输入街道" v-decorator="['streetName', {rules: [{required: false, message: '请输入街道！'}]}]" />
                        </a-form-item>

                        
                        <a-form-item
                        label="幼儿园类型"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        
                        <a-select placeholder='请选择幼儿园类型' allowClear v-decorator="['gardenType', {rules: [{required: true, message: '请选择幼儿园类型！'}]}]">
                            <a-select-option value="1">公立幼儿园</a-select-option>
                            <a-select-option value="2">私立幼儿园</a-select-option>
                        </a-select>
                        </a-form-item>

                        
                        <a-form-item
                        label="是否普惠园"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        <a-radio-group v-decorator="['whetherItIsPuhuiPark', {rules: [{required: true, message: '请选择是否普惠园！'}]}]">
                            <a-radio :value="true">是</a-radio>
                            <a-radio :value="false">否</a-radio>
                        </a-radio-group>
                        </a-form-item>

                        
                        <a-form-item
                        label="园所级别"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        
                        <a-select placeholder='请选择园所级别' allowClear v-decorator="['gardenLevel', {rules: [{required: false, message: '请选择园所级别！'}]}]">
                            <a-select-option value="1">一级</a-select-option>
                            <a-select-option value="2">二级</a-select-option>
                            <a-select-option value="3">三级</a-select-option>
                            <a-select-option value="4">示范园</a-select-option>
                        </a-select>
                        </a-form-item>

                        <a-form-item
                        label="占地面积"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                        <a-input placeholder="请输入占地面积" v-decorator="['areaCovered', {rules: [{required: false, message: '请输入占地面积！'}]}]" />
                        </a-form-item>

                        <a-form-item
                        label="园所LOGO"
                        :labelCol="labelCol"
                        :wrapperCol="wrapperCol"
                        has-feedback
                        >
                            <a-upload
                                name="avatar"
                                list-type="picture-card"
                                class="avatar-uploader"
                                :show-upload-list="false"
                                :before-upload="beforeUpload"
                            >
                                <img class="u-img" v-if="gardenLogo" :src="gardenLogo" alt="avatar" />
                                <div v-else>
                                    <a-icon :type="uploadloading ? 'loading' : 'plus'" />
                                    <div class="ant-upload-text">
                                        上传图片
                                    </div>
                                </div>
                            </a-upload>
                            <a-icon class="deleteimgicon" v-if="gardenLogo" @click="deleteImg" type="delete" />
                            <span>（图片请为正方形，否则容易变形，大小不要超过1M）</span>
                        </a-form-item>
                        

                    </a-form>
                </a-card>
            </a-col>
            <a-col :span="12">
                
                <a-card class="card-bg">
                <a-textarea v-model="desc" class="right-textarea" placeholder="请填写幼儿园的介绍信息" autoSize />
                </a-card>
            </a-col>
        </a-row>
    </div>
</template>
<script>
import {ProvincesAll, GardenHouseSave, getGardenHouse} from '@/api/modular/garden/gardenInfo';
  import moment from 'moment';
export default {
    data(){
        return {
            labelCol: {
            xs: { span: 24 },
            sm: { span: 5 }
            },
            wrapperCol: {
            xs: { span: 24 },
            sm: { span: 18 }
            },
            form: this.$form.createForm(this),
            cityOptions: [],
            provinceData: [],
            cities: [],
            places: [],
            cityName: '',
            areaName: '',
            streetName: '',
            provinceName: '',
            uploadloading: false,
            gardenLogo: '',
            desc: '',
            gardenName: '',
            dateofEstablishment: '',
            confirmLoading: false,
            gardenLevel: '',
            id: null,
            whetherItIsPuhuiPark: true,
            gardenType: '',
            dateFormat: 'YYYY-MM-DD',
            areaCovered: '',
        }
    },
    mounted(){
        this.getCitys();
        this.getInfos();
    },
    methods: {
        getInfos(){
            getGardenHouse().then((res) => {
                if(res.code === 200){
                    this.provinceName = res.data.provinceName;
                    this.cityName = res.data.cityName;
                    this.areaName = res.data.areaName;
                    this.gardenLogo = res.data.gardenLogo;
                    this.desc = res.data.desc;
                    setTimeout(() => {
                        this.form.setFieldsValue(
                            {
                                id: res.data.id,
                                gardenName:res.data.gardenName,
                                gardenLevel: res.data.gardenLevel?res.data.gardenLevel.toString():'',
                                streetName: res.data.streetName,
                                whetherItIsPuhuiPark: res.data.whetherItIsPuhuiPark,
                                gardenType: res.data.gardenType.toString(),
                                areaCovered: res.data.areaCovered
                            }
                        )
                        this.form.getFieldDecorator('dateofEstablishment', { initialValue: moment(res.data.dateofEstablishment, 'YYYY-MM-DD') })
                    }, 100)
                }
            })
        },
        getCitys(){
            ProvincesAll().then((res) => {
                console.log(res)
                if(res.code === 200){
                    this.provinceData = res.data.provinceCity;
                }
            })
        },
        onCityChange(){

        },
        handleProvinceChange(){
            console.log(this.provinceName)
            this.cityName = '';
            this.areaName = '';
            if(this.provinceName){
                let _data = this.provinceData.find(item => {return item.name === this.provinceName});
                this.cities = _data.children;
            }
        },
        handleCityChange(){
            this.areaName = '';
            if(this.cityName){
                let _data = this.cities.find(item => {return item.name === this.cityName});
                this.places = _data.children;
            }
        },
        changedate(value){
            
        },
        async beforeUpload(file, fileList){
            console.log(file)
            let src = await this.fileToBase64(file);
            this.gardenLogo = src;
        },
        fileToBase64(file){  
            return new Promise((resolve, reject) => {
                let reader = new FileReader();  
                reader.readAsDataURL(file);  
                reader.onload = function (e) {    
                    resolve(e.target.result)
                }
            })
            
        },
        deleteImg(){
            this.gardenLogo = '';
        },
        resetFrom(){
            this.form.resetFields()
            this.provinceName = '';
            this.cities = [];
            this.places = [];
            this.cityName = '';
            this.areaName = '';
            this.gardenLogo = '';
            this.desc = '';
            this.gardenName = '';
            this.dateofEstablishment = '';
            this.gardenLevel = '';
                this.streetName = '';
                this.whetherItIsPuhuiPark = true;
        },
        save(){
            const { form: { validateFields } } = this
            this.confirmLoading = true
            validateFields((errors, values) => {
                if(!this.provinceName || !this.cityName || !this.areaName){
                    this.$message.error('请选择城市地址')
                    return;
                }
                if (!errors) {
                    let gardenLevel = Number(values.gardenLevel);
                    let obj = {
                        "id": values.id?values.id:null,
                        "gardenName": values.gardenName,
                        "dateofEstablishment": moment(values.dateofEstablishment).format('YYYY-MM-DD'),
                        "provinceName": this.provinceName,
                        "cityName": this.cityName,
                        "areaName": this.areaName,
                        "streetName": values.streetName,
                        "gardenType": Number(values.gardenType),
                        "whetherItIsPuhuiPark": values.whetherItIsPuhuiPark,
                        "gardenLevel": gardenLevel?gardenLevel:0,
                        "areaCovered": values.areaCovered,
                        "gardenLogo": this.gardenLogo,
                        "desc": this.desc,
                    }
                    GardenHouseSave(obj).then((res) => {
                        console.log(res)
                        if (res.success) {
                            this.$message.success('编辑成功')
                            this.confirmLoading = false;
                            this.getInfos();
                        } else {
                            this.$message.error('编辑失败：' + res.message)
                        }
                    }).finally((res) => {
                        this.confirmLoading = false
                    })
                } else {
                    this.confirmLoading = false
                }
            })
        },
    },
}
</script>
<style>
    .card-bg .right-textarea.ant-input{
        height: 600px !important;
    }
</style>
<style scoped lang="less">
    .yuansuoxinxi{

    }
    .margin-right-10{
        margin-right: 10px;
    }
    .avatar-uploader{
        width: 100px;
        height: 100px;
        .u-img{
            width: 100px;
        }
    }
    .deleteimgicon{
        margin-left: 20px;
        cursor: pointer;
        &:hover{
            color: red;
        }
    }
    .card-bg{
        width: 100%;
        height: 700px;
    }
    .right-textarea{
        width: 100%;
        height: 100%;
    }
    .top-catd{
        margin-bottom: 20px;
        background-color: #ffffff;
        padding: 10px;
        overflow: hidden;
    }
</style>
